Using the transition Shorthand Property in CSS
The transition shorthand property in CSS allows you to define all transition-related properties (such as property name, duration, timing function, and delay) in a single line. It simplifies the syntax and makes the code cleaner.
In this example, the element rotates 45 degrees over 0.5 seconds using an ease-in-out timing function and starts after a 0.2-second delay.
transition-property: transform;transition-duration: 0.5s;transition-timing-function: ease-in-out;transition-delay: 0.2s;
You can also define multiple transitions separated by commas when you want to animate several properties at once.
transitionis a shorthand for setting all four transition properties in one declaration.Order matters — the browser determines which value corresponds to each sub-property based on its type.
Use commas to define multiple transitions on different properties.